<template>
  <div id="header">
    <div class="left">
      <!-- <el-image :src="require('@/assets/img/logo.png')" fit="fill"
        style="height: 28px;margin-right:10px"></el-image> -->
      <span>RIS-EDI&nbsp;&nbsp;v3.0 API接口管理平台</span>
    </div>
    <div class="right">
      <div class="right-user">
        <el-image :src="require('@/assets/img/headportrait.png')" fit="fill"
          style="width: 28px; height: 28px;margin-right:10px"></el-image>
        <el-dropdown @command="admin"  trigger="click">
          <span class="el-dropdown-link">
            {{ userInfo.username }}
            <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item command="admin" icon="el-icon-lock">{{
              $t("other.admin")
            }}</el-dropdown-item>
            <el-dropdown-item command="print" icon="el-icon-printer">{{
              $t("manage.reportprintconfig")
            }}</el-dropdown-item> -->
            <el-dropdown-item command="back" icon="el-icon-switch-button">{{
              $t("other.break")
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { removeToken } from "@/utils/auth";
export default {
  name: "",
  data() {
    return {
      userInfo:{}
    };
  },
  methods: {
    admin(type) {
      // this.$router.push({name: "login"});
      if (type == "admin") {
        this.$router.push({ name: "static" });
      } else if (type == "back") {
        removeToken()
        this.$router.push({ name: "login" });
      }else if(type == 'print'){
        this.$router.push({ name: "reportprinter" });
      }
    },
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
  },
  components: {}
};
</script>

<style lang="scss" scope>
#header {
  width: 100%;
  height: 49px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
  }
  
  .el-dropdown-link {
    cursor: pointer;
  }
  
  .el-icon-arrow-down {
    font-size: 12px;
  }
  
  .right {
    width: auto;
    height: 100%;
    line-height: 49px;
    display: flex;
    align-items: center;
  
    &>div {
      padding: 0 20px;
      position: relative;
      &::after{
        content: "";
        position: absolute;
        width: 1px;
        height: 40%;
        top: 30%;
        right: 0;
        background: #fff;
      }
      &:last-child::after{
        display: none;
      }
    }
    .el-icon-arrow-down{
      margin-left: 10px;
    }
  
    .right-user {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .el-input-group__append{
      overflow: hidden;
      /*background: #409eff;
      color: #fff;
      border-color: #409eff;*/
    }
  }
}

</style>
